<template>
  <avue-form
    ref="addForm"
    v-model="form"
    :option="tableOption"
  >
    <template #contact>
      <div v-if="form.contact === '0'">
        是
        <span v-if="form.contactWay">（{{ form.contactWay }}）</span>
      </div>
      <div v-else>否</div>
    </template>
    <template #catHealth>
      <div v-if="form.catHealth === '2'">
        其他
        <span v-if="form.catHealthOther">（{{ form.catHealthOther }}）</span>
      </div>
      <div v-else-if="form.catHealth === '0'">定期清理猫砂盆</div>
      <div v-else>使用自动清理猫砂盆</div>
    </template>
    <!--职业-->
    <template #job>
      <div>{{ form.job }}</div>
    </template>
    <!--宠物的活动范围-->
    <template #petHomeRange>
      <div v-if="form.petHomeRange === '4'">
        其他
        <span v-if="form.petHomeRangeDesc">
          （{{ form.petHomeRangeDesc }}）
        </span>
      </div>
      <div v-else-if="form.petHomeRange === '1'">在家自由活动</div>
      <div v-else-if="form.petHomeRange === '2'">限定活动区域范围</div>
      <div v-else>关笼子</div>
    </template>
    <!--猫咪偏好-->
    <template #specificVarieties>
      <div v-if="form.specificVarieties === '0'">
        是
        <span v-if="form.specificVarietiesName">
          （{{ form.specificVarietiesName }}）
        </span>
      </div>
      <div v-else>否</div>
    </template>
    <!--预计领养时间-->
    <template #predictAdoptTime>
      <div v-if="form.predictAdoptTime === '2'">
        其他
        <span v-if="form.predictAdoptTimeDesc">
          （{{ form.predictAdoptTimeDesc }}）
        </span>
      </div>
      <div v-else-if="form.petHomeRange === '0'">近一个月内</div>
      <div v-else>近半年内</div>
    </template>
    <template #moveCat>
      <div v-if="form.moveCat === '3'">
        其他
        <span v-if="form.notMoveCatDesc">（{{ form.notMoveCatDesc }}）</span>
      </div>
      <div v-else-if="form.moveCat === '0'">会</div>
      <div v-else>不会</div>
    </template>
    <template #catExperience>
      <div v-if="form.catExperience === '0'">
        是
        <span v-if="form.catExperienceDescribe">
          （{{ form.catExperienceDescribe }}）
        </span>
      </div>
      <div v-else>否</div>
    </template>
    <template #petKept>
      <div v-if="form.petKept === '0'">
        是
        <span v-if="form.keptDescribe">（{{ form.keptDescribe }}）</span>
      </div>
      <div v-else>否</div>
    </template>
    <template #livingEnvironment>
      <div v-if="form.livingEnvironment === '0'">
        <div>是</div>
        <avue-form
          ref="detailform"
          v-model="livingform"
          :option="livingOption"
        ></avue-form>
      </div>
      <div v-else>否</div>
    </template>
    <template #employmentCertificate>
      <div v-if="form.employmentCertificate === '0'">
        <div>是</div>
        <avue-form
          ref="detailform"
          v-model="addform"
          :option="uploadOption"
        ></avue-form>
      </div>
      <div v-else>否</div>
    </template>
  </avue-form>
</template>

<script>
import { getQuestionInfo } from '@/api/core/senderApply';
import {
  tableOption,
  uploadOption,
  livingOption,
} from '@/const/crud/customer/questionnaireInfo';
export default {
  name: 'QuestionaireInfo',
  props: {
    id: {
      type: [Object, String],
    },
    value: {
      type: Boolean,
      default: false,
    },
    dataObj: { type: [Object] },
  },
  data() {
    return {
      addform: {},
      form: {},
      livingform: {},
      loading: false,
      uploadOption: uploadOption(),
      livingOption: livingOption(),
      tableOption: tableOption(),
    };
  },
  computed: {},
  watch: {
    id: {
      immediate: true,
      handler(val) {
        if (val) {
          this.id && this.getDetail();
        } else {
          this.$refs.addForm && this.$refs.addForm.resetForm();
        }
      },
    },
  },
  methods: {
    async getDetail() {
      const res = await getQuestionInfo(this.id);
      this.form = { ...res.data.data };
      const temp = JSON.parse(this.form.employmentCertificateFiles);
      const temp1 = JSON.parse(this.form.livingEnvironmentFiles);
      if (temp) {
        this.addform.files = temp.map((item) => {
          let type = 'mov';
          if (item.type === 'image') {
            type = 'jpg';
          }
          return `${item.url}?.${type}`;
        });
      }
      if (temp1) {
        this.livingform.employmentFiles = temp1.map((item) => {
          let type = 'mov';
          if (item.type === 'image') {
            type = 'jpg';
          }
          return `${item.url}?.${type}`;
        });
      }
      // this.form.catFood = this.form.catFood.split(',');
    },
  },
};
</script>

<style lang="scss" scoped></style>
